<template>
  <div>
    <div>例:点踩数处于0-{{ intervalSize }}之间的本章说有n章<br/>
      输入区间长度:
      <el-input v-model="intervalSize" style="max-width: 100px"></el-input>
      <el-button v-on:click="getDownholeCount(intervalSize)">确定</el-button>
    </div>
    <div ref="myChart" style="width: 600px;height: 400px;"></div>

    <div>
      删除点踩数超过
      <!-- style="max-width: 80px;" -->
      <el-input-number v-model="deleteSize" :step="10"  ></el-input-number>
      的本章说
      <el-button slot="reference" v-on:click="deleteDownholeCount(deleteSize)">删除</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {deleteDownholeCount, getDownholeCount} from "@/api";

export default {
  name: "NovelAdminUserComments",
  data() {
    return {
      intervalSize: '10',//区间大小
      deleteSize: '150',//删除阈值
      dataList: [],
      numeralList: [],
    }
  },
  mounted() {
    this.run();
  },
  methods: {

    getDownholeCount(intervalSize) {
      getDownholeCount(intervalSize).then(res => {
        this.dataList = res.data;
        this.numeralList = [];
        for (let i = 0; i < this.dataList.length; i++) {
          let end = i*intervalSize;
          let begin = (i+1)*intervalSize;
          this.numeralList.push( `${end}-${begin}`);
        }
        this.run();
      },).catch(err => console.log(err))
    },

    run() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'X轴代表区间, 长度为:' + this.intervalSize + ", Y轴代表数量"
        },
        tooltip: {},
        xAxis: {
          data: this.numeralList
        },
        yAxis: {},
        series: [
          {
            name: '本章说数量',
            type: 'bar',
            data: this.dataList
          }
        ]
      });
    },

    deleteDownholeCount(deleteSize) {
      deleteDownholeCount(deleteSize).then(ref => {
        console.log((ref.data));
      }).catch(err => console.log(err))
    }
  },
  created() {
    this.getDownholeCount(this.intervalSize);
  },
}
</script>

<style scoped>

</style>